<template>
    <div class="tixian-record">
        <div class="tixian-date">
            <div class="date-item" style="border-right: 1px solid #ccc;" @click="openPicker1">{{pickerValue1 | yyyy-MM-dd}}</div>
            <div class="date-item" @click="openPicker2">{{pickerValue2 | yyyy-MM-dd}}</div>
        </div>
        <div class="tixian-total">
            <div class="tixian-total-item">共有<span style="color:#29abae;font-size:.4rem;">{{list.totalNum}}</span>笔提现</div>
            <div class="tixian-total-item" style="margin-left:.3rem;">合计金额<span style="color:#ff2d41;font-size:.4rem;">￥{{list.totalAccount}}</span></div>
        </div>
        <div class="panel-title" v-if="detailList.length > 0">
            <span>{{date}}</span>
            <span style="float:right;">共提现¥{{dailyIncome}}</span>
        </div>
        <div class="panel-info">
            <router-link  tag="div" class="my-business" v-for="item in detailList" :key="item.id" :to="'/zhangdan_info/' + item.id">
                <div class="agent-item">
                    <span class="item-name">{{item.name}}（{{item.status}}）</span>
                    <span class="item-grade">{{item.createDate}}</span>
                    <a href="javascript:;" class="circle-item-more">¥{{item.amount}}</a>
                </div>
            </router-link>
        </div>
        <mt-datetime-picker
            ref="picker1"
            type="date"
            @confirm="reqDataByTime"
            v-model="pickerValue1">
        </mt-datetime-picker>
        <mt-datetime-picker
            ref="picker2"
            type="date"
            @confirm="reqDataByTime"
            v-model="pickerValue2">
        </mt-datetime-picker>
    </div>
</template>
<script>
import filter from '../../../api/filter.js'
import { post } from '../../../../util/http.js'
import { Toast } from 'mint-ui'
import moment from 'moment'
export default {
    data() {
        return {
            list: {},
            pageNum: 1,
            today: '',
            lastDay: '',
            date: '',
            dailyIncome: '',
            detailList: [],
            obj: {},
            pickerValue1: '',
            pickerValue2: '',
        }
    },
    created() {
        let str = localStorage.getItem('dongHang_data');
        this.obj = JSON.parse(str);
        let today = new Date();
        this.pickerValue2 = this.changeDate(today)
        today.setTime(today.getTime() - 24*60*60*1000);
        this.pickerValue1 = this.changeDate(today)
        this.getTixianList(this.obj.agentId, this.pickerValue1, this.pickerValue2);
    },
    methods: {
        openPicker1() {
            this.$refs.picker1.open();
        },
        openPicker2() {
            this.$refs.picker2.open();
        },
        changeDate(date) {
            return [date.getFullYear()
            , date.getMonth() + 1
            , date.getDate()
            ].join("-");
        },
        reqDataByTime() {
            let yesterday = this.changeDate(this.pickerValue1);
            let today = this.changeDate(this.pickerValue2);
            this.getTixianList(this.obj.agentId, yesterday, today);
        },
        getTixianList(id, date1, date2) {
            post('http://dlsapi.rz158.com/dataShow/forwardList', {
                agentId: id,
                startDate: date1,
                endDate: date2
            }).then(res => {
                if(res.code == 0) {
                    this.list = res.t[0]
                    this.dailyIncome = this.list.resList[0].dailyIncome
                    this.date = this.list.resList[0].date
                    this.detailList = this.list.resList[0].detailList
                } else {
                    Toast({
                        message: res.message,
                        duration: 1000
                    })
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.tixian-date{
    // height: .98rem;
    font-size: .28rem;
    padding: .38rem 0rem;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    display: flex;
    .date-item{
        padding: 0rem .86rem;
        color: #282828;
        flex-grow: 1;
    }
}
.tixian-total{
    height: 1rem;
    padding-right: .3rem;
    text-align: right;
    line-height: 1rem;
    font-weight: bold;
    font-size: .28rem;
    border-bottom: .16rem solid #efefef;
    .tixian-total-item{
        display: inline-block;
    }
}
.panel-title{
    height:  .8rem;
    line-height: .8rem;
    padding: 0rem .3rem;
    border-bottom: 1px solid #cccccc;
    font-size: .28rem;
     color: #282828;
}
.panel-info{
    padding-left:.3rem;
}
 .agent-item{
        position: relative;
        padding: .2rem 0rem;
        height: 1rem;
        border-bottom: 1px solid #cccccc;
        width: 100%;
        a {
            font-size: 0.4rem;
            color: #29abae;
            float: right;
            font-weight: bold;
            &::after {
                color: #282828;
                content: '';
                width: 0.12rem;
                height: 0.2rem;
                background: url(../../../assets/img/next-icon.png) no-repeat;
                display: inline-block;
                width: 0.12rem;
                height: 0.2rem;
                background-size: 100%;
                margin-left: .4rem;
                margin-top: 0.42rem;
                margin-right: .3rem;
            }
        }
        .item-name{
            position: absolute;
            display: inline-block;
            font-size:.32rem;
            font-weight: bold;
            margin-top: .1rem;
        }
        .item-grade{
            position: absolute;
            display: inline-block;
            margin-top: .6rem;
            font-size:.28rem;
        }
    }
</style>

